<!DOCTYPE html>
<html>
<head>

    <title>A basic example of clearing your canvas</title>

    <meta name="description" content=" A basic example/explanation of how to clear or reset your canvas" />
    <meta name="googlebot" content="NOODP">

    <!-- Include the RGraph libraries -->
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

</head>

<body>

    <h1>A basic example of clearing your canvas</h1>
    
    <p>
        This is a demonstration of how the RGraph.Reset(canvas) function may be preferable to the RGraph.Clear() function. It is
        particularly apt if you're using the same canvas to show multiple charts. Because RGraph tracks objects so that it can redraw
        them you may find old charts being redrawn. In this case you can use the <b>RGraph.Reset(canvas)</b> function instead of the
        <i>RGraph.Clear(canvas)</i> function to eliminate traces of prior charts.
    </p>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br />
    <button onclick="DrawBar()">Draw the Bar chart</button>
    <button onclick="DrawLine()">Draw the Line chart</button>
    <button onclick="RGraph.Clear(document.getElementById('cvs'))">Clear the canvas</button>
    <button onclick="RGraph.Reset(document.getElementById('cvs'))">Reset the canvas</button>
    <button onclick="RGraph.Redraw()">Redraw the canvas</button>


    <script>
        $(document).ready(function ()
        {
            DrawBar();
        })
        
        function DrawBar ()
        {
            var labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']

            var bar = new RGraph.Bar({
                id: 'cvs',
                data: [4,8,1,3,5,2,6],
                options: {
                    labels: labels,
                    tooltips: labels
                }
            }).draw()
        }
        
        function DrawLine ()
        {
            var line = new RGraph.Line({
                id: 'cvs',
                data: [3,2,2,2,5,4,1],
                options: {
                    labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                    tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
                }
            }).draw()
        }
    </script>

</body>
</html>